<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自写太极图</title>
    <style type="text/css">
    .whole {
    width: 101px;
    height: 101px;
    background: #000;
    position: absolute;
    border-radius: 50%
}

.A_div {
    width: 50px;
    height: 100px;
    overflow: hidden;
    float: left
}

.A_black_div,.A_white_div {
    width: 100px;
    height: 100px;
    border-radius: 50%
}

.A_black_div {
    background: #000
}

.A_white_div {
    background: #fff;
    margin-left: -50px
}

.B_B_div,.B_W_div {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-left: 25px
}

.B_B_div {
    background: #000
}

.B_W_div {
    background: #fff
}

.B_black_div,.B_white_div {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 20px;
    top: 20px
}

.B_black_div {
    background: #fff
}

.B_white_div {
    background: #000
}

#taiji {
    animation: circleR 15s linear infinite;
}
@-webkit-keyframes circleR {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(-360deg);
    }
}
@-moz-keyframes circleR {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(-360deg);
    }
}
@-o-keyframes circleR {
    0% {
        -o-transform: rotate(0deg);
    }

    100% {
        -o-transform: rotate(-360deg);
    }
}
@-ms-keyframes circleR {
    0% {
        -ms-transform: rotate(0deg);
    }

    100% {
        -ms-transform: rotate(-360deg);
    }
}
@keyframes circleR {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}
    </style>
</head>
<body>
    <div class="whole" id="taiji"> 
   <div class="A_div"> 
    <div class="A_black_div"></div> 
   </div> 
   <div class="A_div"> 
    <div class="A_white_div"></div> 
   </div> 
   <div class="B_B_div"> 
    <div class="B_black_div"></div> 
   </div> 
   <div class="B_W_div"> 
    <div class="B_white_div"></div> 
   </div> 
  </div>
</body>
</html>